<template>
    <div v-loading="loading">
        <div>
            <e-container>
                <el-carousel indicator-position="outside" height="480px">
                    <el-carousel-item v-for="item in bhtList" :key="item.id">
                        <div style="background-size: cover" @click="$goto(item.url)" :style="{'background-image': 'url('+item.image+')',width:'100%', height: '480px'}"></div>
                    </el-carousel-item>
                </el-carousel>
            </e-container>
        </div>
        <div>
            <e-container>
                <e-module-widget-title title="游戏展示">
                    <div class="floor_goods_wrap clearfix">
                        <el-row :gutter="20">
                            <el-col :md="6" v-for="r in youxixinxilist1">
                                <div class="floor_goods_wrap_li">
                                    <div class="floor_goods_wrap_b">
                                        <router-link :to="{path:'/youxixinxidetail',query:{id:r.id}}" class="floor_goods_img">
                                            <e-img-box :src="r.tupian" pb="100"></e-img-box>
                                        </router-link>
                                        <router-link :to="{path:'/youxixinxidetail',query:{id:r.id}}" class="floor_goods_tit" v-html="$substr(r.youximingcheng,20)"></router-link>
                                        <router-link :to="{path:'/youxixinxidetail',query:{id:r.id}}" class="floor_goods_txt" v-html="$substr(r.youxixiangqing,20)"></router-link>
                                        <router-link :to="{path:'/youxixinxidetail',query:{id:r.id}}" class="floor_goods_price"> 浏览量:{{ r.liulanliang }}次 </router-link>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </e-module-widget-title>
            </e-container>
        </div>
        <div>
            <e-container>
                <e-module-widget-title title="道具商品">
                    <div class="floor_goods_wrap clearfix">
                        <el-row :gutter="20">
                            <el-col :md="6" v-for="r in shangpinxinxilist2">
                                <div class="floor_goods_wrap_li">
                                    <div class="floor_goods_wrap_b">
                                        <router-link :to="{path:'/shangpinxinxidetail',query:{id:r.id}}" class="floor_goods_img">
                                            <e-img-box :src="r.tupian" pb="100"></e-img-box>
                                        </router-link>
                                        <router-link
                                            :to="{path:'/shangpinxinxidetail',query:{id:r.id}}"
                                            class="floor_goods_tit"
                                            v-html="$substr(r.shangpinmingcheng,20)"
                                        ></router-link>
                                        <router-link
                                            :to="{path:'/shangpinxinxidetail',query:{id:r.id}}"
                                            class="floor_goods_txt"
                                            v-html="$substr(r.shangpinmiaoshu,20)"
                                        ></router-link>
                                        <router-link :to="{path:'/shangpinxinxidetail',query:{id:r.id}}" class="floor_goods_price"> ￥{{ r.jiage }}元 </router-link>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </e-module-widget-title>
            </e-container>
        </div>
        <div>
            <e-container>
                <e-module-widget-title title="游戏资讯">
                    <div class="">
                        <e-news-list
                            v-for="r in xinwenxinxilist3"
                            :key="r.id"
                            :to="'/xinwenxinxidetail?id='+r.id"
                            :title="r.biaoti"
                            :description="r.neirong"
                            :len="30"
                            :image="r.tupian"
                        >
                            <span>分类: <e-select-view module="xinwenfenlei" :value="r.fenlei" select="id" show="fenleimingcheng"></e-select-view></span>
                            <span>点击率:{{ r.dianjilv }}</span>
                        </e-news-list>
                    </div>
                </e-module-widget-title>
            </e-container>
        </div>
    </div>
</template>
<style type="text/scss" scoped lang="scss"></style>
<script>
    import api from "@/api";
    import { extend } from "@/utils/extend";
    import jdk from "@/utils/extend";
    export default {
        data() {
            return {
                loading: false,
                bhtList: [],
                youxixinxilist1: [],
                shangpinxinxilist2: [],
                xinwenxinxilist3: [],
            };
        },
        watch: {},
        computed: {},
        methods: {
            loadPageData() {
                if (this.loading) return;
                this.loading = true;
                this.$get("/index")
                    .then((res) => {
                        this.loading = false;
                        if (res.code == api.code.OK) {
                            extend(this, res.data);
                        } else {
                            this.$message.error(res.msg);
                        }
                    })
                    .catch((err) => {
                        this.loading = false;
                        this.$message.error(err.message);
                    });
            },
        },
        created() {
            this.loadPageData();
        },
        mounted() {},
        destroyed() {},
    };
</script>
